<template>
  <div class="noLogin">
    <div class="head">
      <div class="img">
        <img src="./static/picture/head.png" />
      </div>
      <p>app 登录</p>
    </div>
    <!--登陆-->
    <form>
      <div class="item">
        <input
          type="text"
          name="name"
          placeholder="请输入您的邮箱帐号"
          class="name"
        />
      </div>
      <div class="item">
        <input
          type="text"
          name="vcode"
          maxlength="6"
          placeholder="请输入验证码"
          autocomplete="off"
          class="vcode"
        />
        <span id="vcode">发送验证码</span>
      </div>
      <div class="item">
        <input
          type="password"
          name="password"
          placeholder="请再次输入您的密码"
          value="123"
          autocomplete="off"
          class="password"
        />
      </div>
      <p>忘记密码</p>
      <div class="submit"><button>登&nbsp;陆</button></div>
    </form>
    <!--第三方登陆-->
    <!--尾部-->
  </div>
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
export default {
  data() {
    return {
      mun: '',
    }
  },
  mounted() {
    // 验证码
    var self = this
    var time = 60
    $('#vcode').click(function () {
      var phone = $('input[name=name]').val()
      if (
        !/^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          phone,
        )
      ) {
        alert('请先输入正确帐号')
        return
      }
      if ($(this).hasClass('disabled')) {
        return
      }
      let url = 'mail/mail/phpinfo.php'
      self.mun = Math.floor(Math.random() * 10000 + 9999)
      console.log(self.mun)
      // axios.post(url,{phone,mun:mun}).then(res=>{
      // 	console.log(res);
      // })
      $('#vcode').addClass('disabled')
      $('#vcode').text('倒计时 ' + time)
      var timer = setInterval(function () {
        time--
        $('#vcode').text('倒计时 ' + time)
        if (time == 0) {
          $('#vcode').text('发送验证码 ')
          clearInterval(timer)
          $('#vcode').removeClass('disabled ')
          time = 60
        }
      }, 1000)
    })
    // 提交验证
    $('.submit button').click(function () {
      var name = $('input[name=name]').val()
      var vcode = $('input[name=vcode]').val()
      var password = $('input[name=password]').val()
      if ($.trim(name) == '') {
        alert('请输入邮箱帐号')
        $('input[name=name]').focus()
        return false
      }
      console.log(self)
      if ($.trim(vcode) == '') {
        alert('验证码为空')
        $('input[name=vcode]').focus()
        return false
      } else if ($.trim(vcode) != self.mun) {
        alert('验证码错误')
        $('input[name=vcode]').focus()
        return false
      }
      if ($.trim(password) == '') {
        alert('请输入密码')
        $('input[name=password]').focus()
        return false
      } else if ($.trim(password) != Number(123)) {
        alert('密码错误')
        $('input[name=password]').focus()
        return false
      }
      alert('登陆成功')
      self.$router.push('/login')
    })
  },
  updated() {},
  deactivated() {},
}
</script>
<style scopeed>
* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
  color: inherit;
  font-weight: normal;
  font-family: '微软雅黑';
  box-sizing: border-box;
  font-style: normal;
}
.noLogin {
  width: 100%;
  overflow-x: hidden;
  background: url('./static/image/top_bg.png') top left no-repeat;
  background-size: 100%;
}
img {
  vertical-align: middle;
  max-width: 100%;
}
a:hover,
a:active,
a:visited,
a:link,
a:focus {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  text-decoration: none;
}
/*头像*/
.head .img {
  width: 1.45rem;
  height: 1.45rem;
  background: #ffffff;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 1.25rem;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.head img {
  width: 1.25rem;
}
.head p {
  text-align: center;
  color: #ffffff;
  font-size: 0.24rem;
  padding-top: 0.15rem;
}
/*登陆表单*/
form {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 1.85rem 0.45rem 0.45rem 0.45rem;
}
form .item {
  display: flex;
  align-items: center;
  height: 0.85rem;
  margin-bottom: 0.35rem;
  font-size: 0.3rem;
  color: #333333;
}
form .item input {
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 0.01rem solid #ebebeb;
  border-radius: 0.85rem;
  box-shadow: 0px 0px 10px rgba(200, 200, 200, 0.1);
  padding-left: 0.8rem;
  outline: none;
}
form .item input.name {
  background: url(./static/image/icon-phone.png) left 0.3rem center no-repeat;
  background-size: 0.23rem 0.35rem;
}
form .item input.vcode {
  background: url(./static/image/icon-verify.png) left 0.3rem center no-repeat;
  background-size: 0.33rem 0.33rem;
}
form .item input.password {
  background: url(./static/image/icon-lock.png) left 0.3rem center no-repeat;
  background-size: 0.22rem 0.32rem;
}
form .item span {
  flex-shrink: 0;
  display: inline-block;
  width: 1.6rem;
  margin-left: 0.2rem;
  height: 100%;
  line-height: 0.85rem;
  border-radius: 0.85rem;
  background: #1f6ecf;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
}
form .item span.disabled {
  background: #808080;
}
form p {
  text-align: center;
  color: #333333;
  font-size: 0.24rem;
  padding-top: 0.2rem;
}
form .submit {
  padding: 0.2rem 0.2rem;
}
form .submit button {
  height: 0.85rem;
  line-height: 0.85rem;
  text-align: center;
  font-size: 0.34rem;
  color: #ffffff;
  border-radius: 0.85rem;
  outline: none;
  box-shadow: 0 0.15rem 0.15rem rgba(31, 110, 207, 0.2);
  display: inline-block;
  width: 100%;
  background: #1f6ecf;
}
/*第三方登陆*/
.other-login p {
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.7rem;
  margin: 0 auto;
}
.other-login p:after {
  content: '';
  height: 0.01rem;
  width: 100%;
  background: #808080;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.other-login p span {
  display: inline-block;
  padding: 0.1rem 0.3rem;
  background: #ffffff;
  color: #808080;
  font-size: 0.22rem;
  z-index: 2;
}
.other-login .third ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.other-login .third ul li img {
  width: 0.66rem;
  height: 0.66rem;
  margin: 0 0.25rem;
}
/*尾部*/
.footer {
  text-align: center;
  padding-top: 0.3rem;
}
.footer img {
  display: inline-block;
  width: 1.07rem;
  height: 0.35rem;
}
.footer p {
  font-size: 0.2rem;
  color: #666666;
  text-align: center;
  padding: 0.1rem 0 0.4rem 0;
  letter-spacing: 0.01rem;
}
.footer p a {
  color: #078dda;
}
</style>
